<template>
  <div class="index">
    <Header />
    <div class="main">
      <div class="pic">
        <img
          v-for="(item, index) in img_bg_list"
          :class="listIndex === index ? 'show' : ''"
          :key="index"
          :src="`http://47.113.189.57:5000/big_bg/${item}.jpg`"
          alt=""
        />
        <button @click="goAnchor('#articlesBody')">
          <svg
            height="36px"
            width="36px"
            viewBox="0 0 36 36"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect fill="#fdd835" y="0" x="0" height="36" width="36"></rect>
            <path
              d="M38.67,42H11.52C11.27,40.62,11,38.57,11,36c0-5,0-11,0-11s1.44-7.39,3.22-9.59 c1.67-2.06,2.76-3.48,6.78-4.41c3-0.7,7.13-0.23,9,1c2.15,1.42,3.37,6.67,3.81,11.29c1.49-0.3,5.21,0.2,5.5,1.28 C40.89,30.29,39.48,38.31,38.67,42z"
              fill="#e53935"
            ></path>
            <path
              d="M39.02,42H11.99c-0.22-2.67-0.48-7.05-0.49-12.72c0.83,4.18,1.63,9.59,6.98,9.79 c3.48,0.12,8.27,0.55,9.83-2.45c1.57-3,3.72-8.95,3.51-15.62c-0.19-5.84-1.75-8.2-2.13-8.7c0.59,0.66,3.74,4.49,4.01,11.7 c0.03,0.83,0.06,1.72,0.08,2.66c4.21-0.15,5.93,1.5,6.07,2.35C40.68,33.85,39.8,38.9,39.02,42z"
              fill="#b71c1c"
            ></path>
            <path
              d="M35,27.17c0,3.67-0.28,11.2-0.42,14.83h-2C32.72,38.42,33,30.83,33,27.17 c0-5.54-1.46-12.65-3.55-14.02c-1.65-1.08-5.49-1.48-8.23-0.85c-3.62,0.83-4.57,1.99-6.14,3.92L15,16.32 c-1.31,1.6-2.59,6.92-3,8.96v10.8c0,2.58,0.28,4.61,0.54,5.92H10.5c-0.25-1.41-0.5-3.42-0.5-5.92l0.02-11.09 c0.15-0.77,1.55-7.63,3.43-9.94l0.08-0.09c1.65-2.03,2.96-3.63,7.25-4.61c3.28-0.76,7.67-0.25,9.77,1.13 C33.79,13.6,35,22.23,35,27.17z"
              fill="#212121"
            ></path>
            <path
              d="M17.165,17.283c5.217-0.055,9.391,0.283,9,6.011c-0.391,5.728-8.478,5.533-9.391,5.337 c-0.913-0.196-7.826-0.043-7.696-5.337C9.209,18,13.645,17.32,17.165,17.283z"
              fill="#01579b"
            ></path>
            <path
              d="M40.739,37.38c-0.28,1.99-0.69,3.53-1.22,4.62h-2.43c0.25-0.19,1.13-1.11,1.67-4.9 c0.57-4-0.23-11.79-0.93-12.78c-0.4-0.4-2.63-0.8-4.37-0.89l0.1-1.99c1.04,0.05,4.53,0.31,5.71,1.49 C40.689,24.36,41.289,33.53,40.739,37.38z"
              fill="#212121"
            ></path>
            <path
              d="M10.154,20.201c0.261,2.059-0.196,3.351,2.543,3.546s8.076,1.022,9.402-0.554 c1.326-1.576,1.75-4.365-0.891-5.267C19.336,17.287,12.959,16.251,10.154,20.201z"
              fill="#81d4fa"
            ></path>
            <path
              d="M17.615,29.677c-0.502,0-0.873-0.03-1.052-0.069c-0.086-0.019-0.236-0.035-0.434-0.06 c-5.344-0.679-8.053-2.784-8.052-6.255c0.001-2.698,1.17-7.238,8.986-7.32l0.181-0.002c3.444-0.038,6.414-0.068,8.272,1.818 c1.173,1.191,1.712,3,1.647,5.53c-0.044,1.688-0.785,3.147-2.144,4.217C22.785,29.296,19.388,29.677,17.615,29.677z M17.086,17.973 c-7.006,0.074-7.008,4.023-7.008,5.321c-0.001,3.109,3.598,3.926,6.305,4.27c0.273,0.035,0.48,0.063,0.601,0.089 c0.563,0.101,4.68,0.035,6.855-1.732c0.865-0.702,1.299-1.57,1.326-2.653c0.051-1.958-0.301-3.291-1.073-4.075 c-1.262-1.281-3.834-1.255-6.825-1.222L17.086,17.973z"
              fill="#212121"
            ></path>
            <path
              d="M15.078,19.043c1.957-0.326,5.122-0.529,4.435,1.304c-0.489,1.304-7.185,2.185-7.185,0.652 C12.328,19.467,15.078,19.043,15.078,19.043z"
              fill="#e1f5fe"
            ></path>
          </svg>
          <span class="now">now!</span>
          <span class="play">play</span>
        </button>
      </div>
      <div class="container">
        <i id="articlesBody"></i>
        <div class="box">
          <div class="left">
            <div class="selected-articles card">
              <div class="title">
                <h2>精选文章</h2>
                <button class="icon-btn add-btn">
                  <div class="add-icon"></div>
                  <div class="btn-txt">查看更多</div>
                </button>
              </div>
              <div class="card-body">
                <ul class="card-articles" v-show="selected_articles == 'front'">
                  <li v-for="(item, index) in articlesTop">
                    <div class="card-articles-left">
                      <img
                        :src="
                          'http://47.113.189.57:5000/articleBanner/' + item.acover
                        "
                        alt=""
                      />
                    </div>
                    <div class="card-articles-right">
                      <h2>
                        <router-link :to="'/article/' + item.aid">{{
                          item.atitle
                        }}</router-link>
                      </h2>
                      <span>{{ item.aintrduce }}</span>
                      <span>{{ item.atime }}</span>
                    </div>
                  </li>
                </ul>
                <!-- <ul class="card-articles" v-show="selected_articles == 'back'">
                  <li v-for="(item, index) in [1, 2, 3, 4, 5, 6]">
                    <div class="card-articles-left">
                      <img src="../assets/img/articleBanner/2.jpg" alt="" />
                    </div>
                    <div class="card-articles-right">
                      <h2>React的基本使用</h2>
                      <span
                        >用类似于html的语法来定义页面。react中通过数据驱动视图的变化，当数据发生改变react能够高效地更新并渲染DOMHello
                        React! 动态数据变化:{count}</span
                      >
                      <span>2天前</span>
                    </div>
                  </li>
                </ul> -->
              </div>
            </div>
            <div class="all-articles card">
              <div class="title">
                <h2>博客文章</h2>
              </div>
              <div class="card-body">
                <div
                  class="article-body"
                  v-for="(item, index) in articles"
                  :class="(index + 1) % 2 == 0 ? 'reverse' : ''"
                >
                  <div class="body-left">
                    <div>
                      <img
                        :src="
                          `http://47.113.189.57:5000/articleBanner/` + item.acover
                        "
                        alt=""
                      />
                    </div>
                  </div>
                  <div class="body-right">
                    <h2>
                      <router-link :to="'/article/' + item.aid">{{
                        item.atitle
                      }}</router-link>
                    </h2>
                    <span>{{ item.aintrduce }}</span>
                    <div>
                      <ul>
                        <li title="时间">
                          <i class="iconfont icon-shizhong"></i>{{ item.atime }}
                        </li>
                        <li title="点赞">
                          <i class="iconfont icon-dianzan"></i>{{ item.alike }}
                        </li>
                        <li title="观看">
                          <i class="iconfont icon-yulan"></i>{{ item.avisited }}
                        </li>
                        <li title="评论">
                          <i class="iconfont icon-xiaoxi-comment"></i
                          >{{ item.acomment }}
                        </li>
                        <li title="收藏">
                          <i class="iconfont icon-shoucang"></i>0
                        </li>
                      </ul>
                      <router-link :to="'/article/' + item.aid">
                        <button>
                          <div class="svg-wrapper-1">
                            <div class="svg-wrapper">
                              <i class="iconfont icon-huojian"></i>
                            </div>
                          </div>
                          <span>查看详情</span>
                        </button>
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pagination">
              <a
                :href="
                  'http://47.113.189.57:8080/?page=' + (articlesPage.pno - 1)
                "
                v-if="this.articlesPage.pno >= 2"
                ><button>上一页</button></a
              >
              <div>
                <a
                  :href="'http://47.113.189.57:8080/?page=' + item"
                  v-for="item in this.articlesPage.pages"
                  
                  ><button :class="articlesPage.pno==item?'actived':''">{{ item }}</button></a
                >
              </div>

              <a
                :href="
                  'http://47.113.189.57:8080/?page=' + (parseInt(articlesPage.pno)  + 1)
                "
                v-if="this.articlesPage.pno != this.articlesPage.pageCount"
                ><button>下一页</button></a
              >
            </div>
          </div>
          <div class="right">
            <div class="welcome-card">
              <div class="content">
                <div class="front">
                  <h3 class="title">Hey</h3>
                  <p class="subtitle">欢迎你 :)</p>
                </div>

                <div class="back">
                  <p class="description">
                    &nbsp;&nbsp;这是我的个人博客，欢迎你的到来！
                  </p>
                </div>
              </div>
            </div>
            <div class="tages card">
              <div class="title">
                <h2>标签云</h2>
              </div>
              <div class="card-body">
                <ul>
                  <li v-for="(item, index) in classify">{{ item }}</li>
                </ul>
              </div>
            </div>
            <div class="person-card">
              <div class="card-info">
                <p class="title">米斯特 · 陈</p>
                <p class="subtitle">制作</p>
              </div>
              <div class="card-bio">
                <p>
                  这是一个住在杭州的前端萌新，欢迎大家来给我留言、创造友情链接！
                </p>
              </div>
            </div>
            <div class="site-info card">
              <div class="title">
                <h2>站点信息</h2>
              </div>
              <div class="card-body">
                <ul>
                  <li>
                    <h3>建站时间：</h3>
                    <span>2022年10月15日</span>
                  </li>
                  <li>
                    <h3>网站程序：</h3>
                    <span>Node.js+Vue</span>
                  </li>
                  <li>
                    <h3>前端文章：</h3>
                    <span>8</span>
                  </li>
                  <li>
                    <h3>后端文章：</h3>
                    <span>6</span>
                  </li>
                  <li>
                    <h3>网站空间：</h3>
                    <span>阿里云服务器</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="friend-links card">
              <div class="title">
                <h2>友情链接</h2>
                <span><a href="#">申请友链</a> </span>
              </div>
              <div class="card-body">目前暂无哦</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'HeaderView',
  data() {
    return {
      img_bg_list: [1, 2, 3, 4, 5],
      listIndex: 0, //默认显示第几张图片
      timer: null,
      selected_articles: 'front',
      articles: [],
      classify: [],
      articlesTop: [],
      articlesPage: [],
    }
  },
  components: {
    Header,
    Footer,
  },
  methods: {
    setTimer() {
      this.timer = setInterval(() => {
        this.listIndex++
        if (this.listIndex == this.img_bg_list.length) {
          this.listIndex = 0
        }
      }, 3000)
    },
    changeBack(backName) {
      this.selected_articles = backName
    },
    goAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: 'smooth', //平滑过渡
        block: 'start',
      })
    },
    getArticles() {
      this.$api.article
        .getArticle()
        .then((res) => {
          // 查询成功
          // console.log(res.data)
          // let data = res.data.data[0]
          // this.articles = data
          let data1 = res.data.data[0].map((v) => {
            return v.aclassify
          })
          this.classify = data1
          let data2 = res.data.data[1]
          this.articlesTop = data2
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
      let page = this.$route.query.page || 1
      this.$api.article
        .getArticlePage(page)
        .then((res) => {
          this.articlesPage = res.data
          this.articles = this.articlesPage.data[0]
          let pages = []
          for (let i = 1; i <= res.data.pageCount; i++) {
            pages.push(i)
          }
          this.articlesPage.pages = pages
          // console.log(this.articlesPage)
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
  },
  created() {
    //定时器
    this.setTimer()
    this.getArticles()
  },
}
</script>

<style lang="scss" scoped>
.main {
  background: var(--main-bg);
  color: black;
  transition: width .3s;
  .pic {
    width: 100vw;
    height: 100vh;
    min-height: 450px;
    overflow: hidden;
    position: relative;
    transition: height .3s;
    > img {
      width: 100%;
      min-width: 800px;
      object-fit:cover;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: 0.5s;
    }
    > img.show {
      opacity: 1 !important;
    }
    /* From uiverse.io by @barisdogansutcu */
    > button {
      left: 50%;
      bottom: -80%;
      transform: translate(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 10px;
      color: white;
      text-shadow: 2px 2px rgb(116, 116, 116);
      text-transform: uppercase;
      border: solid 2px black;
      letter-spacing: 1px;
      font-weight: 600;
      font-size: 17px;
      background-color: #fdd835;
      border-radius: 50px;
      position: relative;
      overflow: hidden;
      transition: all 0.5s ease;
      &:active {
        transform: scale(0.9);
        transition: all 100ms ease;
      }
      > svg {
        transition: all 0.5s ease;
        z-index: 2;
      }
      > .play {
        transition: all 0.5s ease;
        transition-delay: 300ms;
      }
      &:hover svg {
        transform: scale(3) translate(50%);
      }
      > .now {
        position: absolute;
        left: 0;
        transform: translateX(-100%);
        transition: all 0.5s ease;
        z-index: 2;
      }
      &:hover .now {
        transform: translateX(10px);
        transition-delay: 300ms;
      }

      &:hover .play {
        transform: translateX(200%);
        transition-delay: 300ms;
      }
    }
  }
  > .container {
    > #articlesBody {
      position: absolute;
      top: -100px;
      display: block;
      height: 100px;
    }
    .box {
      width: 1200px;
      min-height: 200px;
      display: flex;
      justify-content: space-between;
      .left {
        width: 69%;
        .selected-articles {
          > .title {
            position: relative;
            > div {
              position: absolute;
              top: 20px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .card-body {
            padding: 20px 10px 20px 20px;
            background-color: #fff;
            > .card-articles {
              display: flex;
              flex-wrap: wrap;
              > li {
                width: 50%;
                display: flex;
                background-color: white;
                padding: 10px;
                border-bottom: 1px solid var(--main-bg);
                position: relative;
                overflow: hidden;
                &:nth-child(1),&:nth-child(3),&:nth-child(5){
                  border-right: 1px solid var(--main-bg);
                }
                > .card-articles-left {
                  width: 40%;
                  overflow: hidden;
                  border-radius: 5px;
                  height: 90px;
                  > img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    transition: all 0.3s;
                    &:hover {
                      transform: scale(1.1) rotate(5deg);
                    }
                  }
                }
                > .card-articles-right {
                  width: 60%;
                  padding-left: 10px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  > h2 {
                    font-size: 20px;

                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  > span:nth-child(2) {
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  > span:nth-child(3) {
                    font-size: 14px;
                    color: var(--font_2);
                  }
                }
              }
            }
          }
        }
        .all-articles {
          .reverse {
            flex-direction: row-reverse;
          }
          .article-body {
            display: flex;
            background-color: #fff;
            margin-bottom: 20px;
            transition: 0.3s;
            .body-left {
              width: 30%;
              min-width: 180px;
              padding: 20px 10px 20px 20px;
              > div {
                width: 100%;
                height: 130px;
                overflow: hidden;
                border-radius: 5px;
                > img {
                  width: 100%;
                  transition: all 0.3s;
                  transform: scale(1.2);
                  &:hover {
                    transform: scale(1.5) rotate(5deg);
                  }
                }
              }
            }
            .body-right {
              width: 70%;
              padding: 20px 20px 20px 10px;
              display: flex;
              flex-direction: column;
              align-items: baseline;
              justify-content: space-between;
              > h2 {
                font-size: 20px;
                margin-bottom: 10px;
              }
              > span {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 10px;
              }
              > div {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                > ul {
                  display: flex;
                  > li {
                    margin-right: 20px;
                  }
                }
                a {
                  > button {
                    font-family: inherit;
                    font-size: 16px;
                    background: royalblue;
                    color: white;
                    padding: 0.7em 1em;
                    padding-left: 0.9em;
                    display: flex;
                    align-items: center;
                    border: none;
                    border-radius: 16px;
                    overflow: hidden;
                    transition: all 0.2s;
                    span {
                      display: block;
                      margin-left: 0.3em;
                      transition: all 0.3s ease-in-out;
                    }
                    i {
                      display: block;
                      transform-origin: center center;
                      transition: transform 0.3s ease-in-out;
                    }
                    &:hover .svg-wrapper {
                      animation: fly-1 0.6s ease-in-out infinite alternate;
                    }
                    &:hover i {
                      transform: translateX(2em) rotate(45deg) scale(1.5);
                    }
                    &:hover span {
                      transform: translateX(5em);
                    }
                    &:active {
                      transform: scale(0.95);
                    }
                  }

                  @keyframes fly-1 {
                    from {
                      transform: translateY(0.1em);
                    }

                    to {
                      transform: translateY(-0.1em);
                    }
                  }
                }
              }
            }
            &:hover {
              transform: translateY(-8px);
            }
          }
          .article-body:first-child {
            &:hover {
              transform: translateY(0px);
            }
          }
        }
        .pagination {
          display: flex;
          justify-content: space-around;
          > div {
            width: 55%;
            display: flex;
            justify-content: space-evenly;
          }
          a {
            > button {
              background: linear-gradient(
                -45deg,
                #3f00b5,
                #9f69fe,
                #27c8b7,
                #3f00b5
              );
              background-size: 800% 400%;
              padding: 1em 2em;
              display: inline-block;
              border: none;
              border-radius: 10px;
              font-size: 17px;
              font-weight: 700;
              color: white;
              transition: all 0.5s ease-in-out;
              animation: gradient 10s cubic-bezier(0.62, 0.28, 0.23, 0.99);

              &:hover {
                animation: gradient 3s infinite;
                transform: scale(1.05);
              }

              &:active {
                animation: gradient 3s;
                transform: scale(0.8);
              }

              @keyframes gradient {
                0% {
                  background-position: 0% 50%;
                }

                50% {
                  background-position: 100% 50%;
                }

                100% {
                  background-position: 0% 50%;
                }
              }
            }
            > .actived {
              background: #27c8b7;
            }
          }
        }
      }
      .card {
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid var(--main-bg);
          padding: 20px 20px 10px 20px;
          background-color: white;
          border-radius: 5px 5px 0 0;
          > h2 {
            font-size: 20px;
          }
          .icon-btn {
            transform: scale(0.7);
            width: 50px;
            height: 50px;
            border: 1px solid #cdcdcd;
            background: white;
            border-radius: 25px;
            overflow: hidden;
            position: relative;
            transition: width 0.2s ease-in-out;
            font-weight: 500;
            font-family: inherit;
          }

          .add-btn:hover {
            width: 120px;
          }

          .add-btn::before,
          .add-btn::after {
            transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
            content: '';
            position: absolute;
            height: 4px;
            width: 10px;
            top: calc(50% - 2px);
            background: seagreen;
          }

          .add-btn::after {
            right: 14px;
            overflow: hidden;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
          }

          .add-btn::before {
            left: 14px;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
          }

          .icon-btn:focus {
            outline: none;
          }

          .btn-txt {
            opacity: 0;
            transition: opacity 0.2s;
            font-size: 18px;
          }

          .add-btn:hover::before,
          .add-btn:hover::after {
            width: 4px;
            border-radius: 2px;
          }

          .add-btn:hover .btn-txt {
            opacity: 1;
          }

          .add-icon::after,
          .add-icon::before {
            transition: all 0.2s ease-in-out;
            content: '';
            position: absolute;
            height: 20px;
            width: 2px;
            top: calc(50% - 10px);
            background: seagreen;
            overflow: hidden;
          }

          .add-icon::before {
            left: 22px;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
          }

          .add-icon::after {
            right: 22px;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
          }

          .add-btn:hover .add-icon::before {
            left: 15px;
            height: 4px;
            top: calc(50% - 2px);
          }

          .add-btn:hover .add-icon::after {
            right: 15px;
            height: 4px;
            top: calc(50% - 2px);
          }
        }
        .card-body {
          background-color: transparent;
          border-radius: 0 0 5px 5px;
        }
      }
      .right {
        width: 30%;
        .card-body {
          background-color: #fff;
          padding: 20px;
        }
        .welcome-card {
          width: 12rem;
          cursor: pointer;
          color: var(--footer-color);
          margin: 0 auto 20px;
          .front,
          .back {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            padding: 2em;
            transform-style: preserve-3d;
            backface-visibility: hidden;
          }

          .title {
            transform: translateZ(5rem);
            font-size: 2rem;
          }

          .subtitle {
            transform: translateZ(2rem);
          }

          .back {
            transform: rotateY(0.5turn);
            background-color: #009bff;
          }

          .description {
            transform: translateZ(3rem);
          }
          .content {
            text-align: center;
            position: relative;
            transition: all 2.25s;
            background-color: rgb(127, 204, 240);
            padding: 5em;
            transform-style: preserve-3d;
            animation: rotateContent 6s linear infinite;
          }
        }
        .welcome-card:hover .content {
          animation-play-state: paused;
        }
        @keyframes rotateContent {
          0% {
            transform: rotateY(0turn);
          }
          25% {
            transform: rotateY(0turn);
          }
          50% {
            transform: rotateY(0.5turn);
          }
          75% {
            transform: rotateY(0.5turn);
          }
          100% {
            transform: rotateY(1turn);
          }
        }
        .tages {
          > .card-body {
            > ul {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin-top: 10px;
              position: relative;
              justify-content: flex-start;
              &::after {
                content: '';
                display: block;
                width: 20px;
                height: 20px;
                background-color: #ff9800;
                position: absolute;
                top: 0;
                left: 0;
                transform: translate(-100%, -100%);
                animation: move-box 5s ease-in-out infinite;
              }
              @keyframes move-box {
                0% {
                  left: 0;
                  top: 0;
                }
                25% {
                  left: calc(100% + 20px);
                  top: 0;
                }
                50% {
                  left: calc(100% + 20px);
                  top: calc(100% + 20px);
                }
                75% {
                  left: 0;
                  top: calc(100% + 20px);
                }
                100% {
                  left: 0;
                  top: 0;
                }
                // 0%{}
              }
              > li {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(100% / 3 - 3px);
                height: 40px;
                &:nth-child(6n + 1),
                &:nth-child(6n + 2),
                &:nth-child(6n + 3) {
                  background-color: #f5f5f5;
                }
                &:nth-child(3n + 1),
                &:nth-child(3n + 2) {
                  border-right: 1px solid #f0eeee;
                }
              }
            }
          }
        }
        .person-card {
          width: 190px;
          height: 254px;
          position: relative;
          outline: 0.5em solid #f5f5f5;
          background: #ff930f;
          background: linear-gradient(to top, #ff930f 0%, #fffa5c 100%);
          overflow: hidden;
          margin: 0 auto 20px;
          &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 4;
            background-color: rgba(80, 64, 44, 0);
            transition: background-color 1s;
          }
          .card-info {
            bottom: 0;
            position: absolute;
            width: 100%;
            padding: 1.5em;
            text-align: center;
            transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
          }
          .card-bio {
            padding: 1.8em;
            text-align: center;
            transform: translate(100%, 40%);
            transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
          }
          .card-bio p {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.5em;
          }
          /*Text*/
          .title {
            font-size: 1.3em;
            font-weight: bold;
            &::after {
              content: '';
              display: block;
              width: 50%;
              height: 2px;
              margin: 0 auto 4%;
              background-color: #000;
            }
          }

          .subtitle {
            font-weight: 400;
            line-height: 1em;
          }
          &:hover::before {
            background-color: rgba(80, 64, 44, 0.25);
          }

          &:hover .card-info {
            transform: translateX(-100%);
          }

          &:hover .card-bio {
            transform: translate(0, 40%);
            opacity: 1;
          }
        }

        .site-info {
          .card-body {
            > ul {
              display: flex;
              flex-direction: column;
              > li {
                display: flex;
                > h3 {
                  font-size: 16px;
                }
                > span {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
